<template>
  <div id="app">
    <img-pwd 
      class="img-pwd"
      v-model="pwdValue"
      @change="handleChange"
      @success="handleSuccess"
      :status="status"
      :isHideLine="true"
      ref="imgpwd" />
  </div>
</template>

<script>
// import imgPwd from './components/Main.vue'
import Vue from 'vue'
// import  '../dist/imgPwd.umd.js'
import imgPwd from './index'
// const imgPwd = require('../dist/imgPwd.common.js');
Vue.use(imgPwd)
export default {
  name: 'app',
  data () {
    return {
      pwdValue: '',
      status: '',
    }
  },
  // components: {
  //   imgPwd
  // },
  methods: {
    reset(){
      this.status = '';
      this.$refs.imgpwd.reset()
    },
    handleChange(val, newVal){
      console.log(`当前值：${val}  最终值：${newVal}`);
    },
    handleSuccess(val){
      console.log("输入完成,密码: " + val);
      // this.status = 'disabled'
    }
  }
}
</script>
<style lang="scss" scoped>
  .img-pwd{
    margin:  30px auto;
  }
</style>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
